<template>
    <div style="padding: 30px">
        <bar-chart height="200" :data="bardata" id="bar1"></bar-chart>
        <div style="font-size: 20px;font-weight: 600;margin-top: 78px;
        margin-bottom: 24px;letter-spacing: 2px;color: #333333;">
            管理员,以下是您最近管理的活动
        </div>
        <div class="container">
            <my-card style="width: 285px;height: 318px;padding: 30px">
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;">
                    <div style="background: #EAF6EC;width: 100px;height: 100px;border-radius: 50%;display: flex;justify-content: center;align-items: center"
                         @click="addEvent">
                        <a-icon type="plus" style="font-size: 40px;color: #34AA44"/>
                    </div>
                    <div style="font-size: 18px;color: #3E3F42;margin-top: 24px;line-height: 28px">新建活动</div>
                    <div style="font-size: 14px;color:#6B6C6F;text-align: center;margin-top: 4px">点击+号添加新的活动</div>
                </div>
            </my-card>
            <event_card v-for="(item,index) in data" :key="index" :data="item"></event_card>
        </div>
    </div>
</template>

<script>
    import barChart from '../../../components/echarts/EchaBar.vue';
    import EventCard from '@/components/card/EventCard';
    // import LineCard from '../../../components/echarts/EchaLineCard.vue';


    export default {
        name: 'Main',
        components: {
            // 'lineCard': LineCard,
            'barChart': barChart,
            'event_card': EventCard,
        },
        props: {},
        created () {
            this.$apis.getAdminEvent().then((data)=>{
                this.data = data;
            });
        },
        mounted () {

        },
        watch: {},
        data () {
            return {
                boxstyle: {width: '100px'},
                bardata: [1, 55, 26, 35, 4, 8, 5, 6, 2, 1, 4, 23, 47, 8, 5,
                          6, 8, 7, 4, 18, 12, 5, 6, 8, 7, 4, 18, 12, 1],
                linedata: [55, 26, 35, 4, 8, 5, 6, 2, 1, 4, 23, 47, 8, 5, 6, 8, 7, 4, 18, 12, 5],
                headers: [
                    {
                        text: '项目名称',
                        align: 'left',
                        sortable: false,
                        value: 'name',
                    },
                    {text: '项目浏览数', value: 'calories'},
                    {text: '项目报名数', value: 'fat'},
                    {text: '项目报名趋势', value: 'iron', sortable: false},
                ],
                desserts: [
                    {
                        value: false,
                        name: 'Frozen Yogurt',
                        calories: 159,
                        fat: 6.0,
                        carbs: 24,
                        protein: 4.0,
                        iron: '1%',
                    },
                    {
                        value: false,
                        name: 'Ice cream sandwich',
                        calories: 237,
                        fat: 9.0,
                        carbs: 37,
                        protein: 4.3,
                        iron: '1%',
                    },
                    {
                        value: false,
                        name: 'Eclair',
                        calories: 262,
                        fat: 16.0,
                        carbs: 23,
                        protein: 6.0,
                        iron: '7%',
                    },
                    {
                        value: false,
                        name: 'Cupcake',
                        calories: 305,
                        fat: 3.7,
                        carbs: 67,
                        protein: 4.3,
                        iron: '8%',
                    },
                    {
                        value: false,
                        name: 'Gingerbread',
                        calories: 356,
                        fat: 16.0,
                        carbs: 49,
                        protein: 3.9,
                        iron: '16%',
                    },
                    {
                        value: false,
                        name: 'Jelly bean',
                        calories: 375,
                        fat: 0.0,
                        carbs: 94,
                        protein: 0.0,
                        iron: '0%',
                    },
                    {
                        value: false,
                        name: 'Lollipop',
                        calories: 392,
                        fat: 0.2,
                        carbs: 98,
                        protein: 0,
                        iron: '2%',
                    },
                    {
                        value: false,
                        name: 'Honeycomb',
                        calories: 408,
                        fat: 3.2,
                        carbs: 87,
                        protein: 6.5,
                        iron: '45%',
                    },
                    {
                        value: false,
                        name: 'Donut',
                        calories: 452,
                        fat: 25.0,
                        carbs: 51,
                        protein: 4.9,
                        iron: '22%',
                    },
                    {
                        value: false,
                        name: 'KitKat',
                        calories: 518,
                        fat: 26.0,
                        carbs: 65,
                        protein: 7,
                        iron: '6%',
                    },
                ],
                data: {},
            };
        },
        methods: {
            addEvent () {
                this.$apis.addEvent().then((newEventId)=>{
                    this.$router.push(`/event/admin/${newEventId}`);
                });
            },
        },
    };
</script>

<style scoped>
    @media screen and (min-width: 1600px) {
        .container {
            display: grid;
            grid-template-columns: 285px 285px 285px 285px !important;
            grid-template-rows: 318px;
            grid-row-gap: 15px;
            grid-auto-columns: 285px;
            grid-auto-rows: 318px;
            justify-content: space-between;
        }
    }

    .container {
        display: grid;
        grid-template-columns: 285px 285px 285px;
        grid-template-rows: 318px;
        grid-row-gap: 24px;
        grid-auto-columns: 285px;
        grid-auto-rows: 318px;
        justify-content: space-between;
    }
</style>
